<template>
  <button v-for="(item, index) in imgsrcs" :key="index" @click="openModalHandle(index)">
      <!-- 使用Teleport全屏打开模态框 -->
      <img :src="item" />
  </button>
  <teleport to="body">
      <div v-if="modalOpen" class="modal">
          <div>
              <!-- 这是Teleport模态框<br>(展示位置是&lt;body&gt;元素) -->
              <img :src="currentImgsrc" />
              <button @click="closeModalHandle">
                  Close
              </button>
          </div>
      </div>
  </teleport>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            modalOpen: false,
            imgsrcs:[require('@/assets/class7/0.jpg'),require('@/assets/class7/1.jpg'),require('@/assets/class7/2.jpg'),require('@/assets/class7/3.jpg')],
            currentImgsrc: require('@/assets/class7/0.jpg')
        })

        const openModalHandle = (index) => {
            state.currentImgsrc = state.imgsrcs[index]
            state.modalOpen = true
        }

        const closeModalHandle = () => {
            state.modalOpen = false
        }

        return {
            ...toRefs(state),
            openModalHandle,
            closeModalHandle
        }
    }
}
</script>

<style scoped>
.modal {
    position: absolute;
    top: 0; right: 0; bottom: 0;; left: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.modal div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 5px;
}
</style>